<template>
   <div style="padding:20px">
       <h4 class="mt-4">编辑Role</h4>
       <h5 class="mt-4">{{role.name}}</h5>
       <div class="mt-4" style="font-size:16px">
           <span @click="toggle(true)"><a href="#">选择全部</a></span>&nbsp;&nbsp;/&nbsp;
           <span @click="toggle(false)"><a href="#">反选全部</a></span>
       </div>
       <Tree ref="tree" class="mt-4" :data="permissions" show-checkbox multiple></Tree>
       <Button @click="update" class="mt-4" type="primary">发布</Button>
   </div>
</template>
<script>
    import {mapState} from 'vuex'
    export default {
        name: 'RolesEdit',
        mounted() {
            this.id = this.$route.params.id;
            this.getRoleDetail()
        },
        methods: {
            getRoleDetail() {
                http.get('/api/role/'+this.id).then((data)=>{

                    this.role = data
                    let ids = [];
                    Object.keys(this.role.permissions).forEach((key)=>{
                       ids.push(this.role.permissions[key].id);
                    });
                    console.log(ids);
                    let p = [];
                    Object.keys(this.role.all_permissions).forEach((key)=>{
                        let item  = {};
                        item.title = key;
                        item.expand = true;
                        item.children =[];
                        this.role.all_permissions[key].forEach((childItem)=>{
                           let child = {};
                           child.title = childItem.name;
                           child.expand = true;
                           child.checked = ids.indexOf(childItem.id) >=0;
                           child.id = childItem.id;
                           item.children.push(child);
                       });
                        p.push(item);
                    });
                    this.permissions = p;
                });
            },
            update() {
                let ids = [];
                this.permissions.forEach((item)=> {
                   this.getId(ids, item);
                });
                let params = new URLSearchParams();
                params.append('ids',JSON.stringify(ids));
                params.append('token',this.token);
                http.put('/api/role/'+this.id,params).then((data)=>{
                    console.log(data)
                });
            },
            getId(ids,item) {
                  if (item.children != 'undefined') {
                      item.children.forEach((item)=>{
                         if(item.checked) {
                             ids.push(item.id);
                         }
                      });
                  }
            },
            toggle(open) {

                Object.keys(this.permissions).forEach((key)=>{
                    this.permissions[key].checked = false;
                    this.permissions[key].children.forEach((childItem)=>{
                        childItem.checked = open;
                    });
                });
            }
        },
        computed: {
            ...mapState('user',['token'])
        },
        data () {
            return {
                id:'',
                role: {},
                permissions: []
            }
        }
    }
</script>
